<template>
	<div>
		<div class="menberConTitle flex" style="justify-content: space-between;">
			<div class="tableTitle">职称等级</div>
			<div>
				<el-button type="primary" size="mini" class="titleBtn" round @click="toAddPage('/entrance/teammanagement/addtechnical')">新增</el-button>
			</div>
		</div>
		<div class="tableDataBox flex">
			<el-table :data="pageData" style="width: 100%">
				<el-table-column prop="getDate" label="获得年月"></el-table-column>
				<el-table-column prop="dictionariesId" label="所属行业">
					<template slot-scope="scope">
						{{ dictionariesName(scope.row.dictionariesId) }}
					</template>
				</el-table-column>
				<el-table-column prop="address" label="职称等级">
					<template slot-scope="scope">
						{{ scope.row.rankId?RankName(scope.row.rankId):scope.row.rankName }}
					</template>
				</el-table-column>
				<el-table-column prop="address" label="证书">
					<template slot-scope="scope">
						<el-image v-if="scope.row.rankPicture" class="tableImages" title="点击查看大图" :preview-src-list="[scope.row.rankPicture]"
						 :src="scope.row.rankPicture" fit="cover"></el-image>
						<el-upload v-else class="upload-demo" action="" :http-request="uploadFile" :show-file-list="false">
							<el-button type="text" @click="getIndex(scope.$index)">上传图片</el-button>
						</el-upload>
					</template>
				</el-table-column>
				<el-table-column label="操作" width="160">
					<template slot-scope="scope">
						<el-button type="text" v-if="scope.row.isOpen == 1" @click="setIsOpen(scope.row)">不公开</el-button>
						<el-button type="text" v-else @click="setIsOpen(scope.row)">公开</el-button>
						<el-button type="text" @click="toAddPage(`/entrance/teammanagement/addtechnical?index=${scope.$index}`)">修改</el-button>
						<el-button type="text" style="color: #F42929;" @click="deleteRow(scope.$index)">删除</el-button>
					</template>
				</el-table-column>
			</el-table>
		</div>
	</div>
</template>

<script>
	import add from '../utils/index.js'
	export default {
		data(){
			return{
				pageData: add.data.rankName,
				handlerTime: '',
				uploadFileIndex: '',
				dictionaries: '',
				rankNameList: ''
			}
		},
		mounted() {
			this.getDictionaries()
			this.getRankNameList()
		},
		computed:{
			dictionariesName(){
				return function(id){
					let names = ''
					if(this.dictionaries){
						this.dictionaries.forEach((v)=>{
							if(v.id == id){
								names = v.menuName
							}
						})
					}
					return names
				}
			},
			RankName(){
				return function(id){
					let names = ''
					if(this.rankNameList){
						this.rankNameList.forEach((v)=>{
							if(v.id == id){
								names = v.rankName
							}
						})
					}
					return names
				}
			}
		},
		watch: {
			handlerTime(newValue){
				this.pageData = add.data.rankName
			}
		},
		methods:{
			toAddPage(url) {
				// 跳转到新增页面
				this.$router.push(url)
			},
			setIsOpen(row) {
				// 是否公开
				if(row.isOpen == '1'){
					row.isOpen = '0'
				} else {
					row.isOpen = '1'
				}
				this.setHandlerTime()
			},
			deleteRow(index){
				add.rankname.remove(index)
			},
			getIndex(index){
				// 获取上传图片的数组下标
				this.uploadFileIndex = index
			},
			uploadFile(file){
				// 上传文件
				let File = file.file
				add.uploadFile(File, (data) => {
					add.rankname.getSelf(this.uploadFileIndex, (obj) => {
						obj.rankPicture = data
					})
					this.$message.success('上传成功')
					this.setHandlerTime()
				})
			},
			setHandlerTime(){
				this.handlerTime = new Date().getTime()
			},
			getDictionaries(){
				// 服务产业dictionaries
				this.$request.get(this.$api.getWorkbenchMenu).then(res=>{
					if(res.code == 200){
						this.dictionaries = res.data
					}
				})
			},
			getRankNameList(){
				// 获取职级列表
				this.$request.postForm(this.$api.getAllRank).then(res=>{
					if(res.code == 200){
						this.rankNameList = res.data
					}
				})
			}
		}
	}
</script>

<style scoped="scoped">
	.menberConTitle {
		width: 100%;
		background: #F3F3F3;
		text-align: left;
		padding: 5px 20px;
		font-size: 16px;
		color: #333333;
		align-items: center;
		/* margin-bottom: 20px; */
		margin-top: 30px;
	}
	.tableImages {
		width: 30px;
		height: 30px;
		border-radius: 5px;
		box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
		cursor: pointer;
	}
</style>
